<template>
  <div class="percenter">
    <!-- 头部 -->
    <header>
      <div class="h-left">
        <router-link to="/home"
          ><img src="../../assets/image/18721.png" style="width: 8px"
        /></router-link>
      </div>
      <div class="h-title">个人中心</div>
      <div class="h-right" style="margin-right: 11px">
        <router-link to="/personal">书架</router-link>
      </div>
    </header>
    <div class="P_photo">
      <div class="Photo">
        <img
          src="https://img.xmkanshu.com/operateimg/img/u/20171106/img/6.jpg"
        />
      </div>
      <div class="Name">
        <span class="nickname" style="padding-left: 10px">134****2866</span>
      </div>
    </div>
    <div class="BokGift">
      <div class="book_coins">0<br /><span>书币</span></div>
      <div class="coupons">0<br /><span>礼券</span></div>
    </div>
    <!-- 账号 -->
    <div class="TaskList">
      <div class="PicIco">
        <img src="../../assets/image/tou.png" />
      </div>
      <div class="T_list_cent">
        <font>账号ID：304515382</font>
      </div>
      <div class="Ico_left" @click="onLogout">退出账号</div>
    </div>
    <!-- VIP包月 -->
    <div class="TaskList">
      <div class="PicIco">
        <img src="../../assets/image/rq.png" />
      </div>
      <div class="T_list_cent"><font>VIP包月：</font><span>未开通</span></div>
      <div class="Btn">开通</div>
    </div>
    <div class="TaskList">
      <div class="PicIco">
        <img src="../../assets/image/xiaof.png" />
      </div>
      <div class="T_list_cent"><font>消费记录</font></div>
      <div class="Ico_left"></div>
    </div>
    <!-- 阅读帮助 -->
    <div class="TaskList">
      <div class="PicIco">
        <img src="../../assets/image/bookbz.png" />
      </div>
      <div class="T_list_cent"><font>阅读帮助</font></div>
      <div class="Ico_left"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div style="font-size: 13px; color: #c1c1c1; padding-top: 20px">
        客服
        <a
          href="tel:4006289988"
          style="font-size: 13px; color: #c1c1c1; padding-top: 20px"
          >400-628-9988</a
        >
      </div>

      <div class="foot-app">
        <a href="#">极速版</a>
        <a href="#" class="con">触屏版</a>
        <a href="#">客户端</a>
      </div>
      <div class="foot_panda">© 2022 熊猫看书</div>
      <div class="foot_panda" id="icpbei">京ICP备 11009265号-5</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 退出登录
    onLogout() {
      localStorage.removeItem("token", "13421722866");
      localStorage.removeItem("userId", "lin1768122763");
      localStorage.removeItem("code", "AX35");
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  background: #fff;
}
.P_photo {
  background: #fff;
  height: 108px;
  .Photo {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    padding-top: 20px;
    img {
      width: 100%;
      border-radius: 25px;
      display: block;
    }
  }
  .Name {
    text-align: center;
    margin-top: 8px;
    line-height: 13px;
    .nickname {
      font-size: 12px;
      color: #333;
      padding-right: 10px;
    }
  }
}
.BokGift {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
  .book_coins {
    border-right: 1px #e6e6e6 solid;
    flex: 1;
    width: 50%;
    text-align: center;
    padding-bottom: 17px;
    font-size: 18px;
    color: #555;
    span {
      font-size: 12px;
      color: #aaa;
    }
  }
  .coupons {
    border-right: 1px #e6e6e6 solid;
    flex: 1;
    width: 50%;
    text-align: center;
    padding-bottom: 17px;
    font-size: 18px;
    color: #555;
    span {
      font-size: 12px;
      color: #aaa;
    }
  }
}
.TaskList {
  padding: 0px 20px;
  height: 54px;
  display: flex;
  border-bottom: 1px #e3e4e5 solid;
  .PicIco {
    width: 18px;
    height: 18px;
    margin-top: 17px;
    margin-right: 10px;
    img {
      width: 100%;
    }
  }
  .T_list_cent {
    flex: 1;
    font {
      font-size: 14px;
      color: #333;
      line-height: 54px;
    }
    span {
      color: #aaa;
      padding-left: 5px;
      font-size: 13px;
    }
  }
  .Ico_left {
    background: url("../../assets/image/123456.png") no-repeat center right;
    background-size: 6px 12px;
    line-height: 54px;
    font-size: 14px;
    color: #aaa;
    padding-right: 15px;
  }
  .Btn {
    height: 28px;
    border: 1px #f54b41 solid;
    border-radius: 3px;
    padding: 0px 20px;
    font-size: 14px;
    color: #f54b41;
    line-height: 28px;
    margin-top: 13px;
  }
}
</style>